<template>
    <div>
        <div>
            <vue-particles
                    color="#555"
                    :particleOpacity="0.7"
                    :particlesNumber="150"
                    shapeType="circle"
                    :particleSize="4"
                    linesColor="#555"
                    :linesWidth="1"
                    :lineLinked="true"
                    :lineOpacity="0.4"
                    :linesDistance="150"
                    :moveSpeed="2"
                    :hoverEffect="true"
                    hoverMode="grab"
                    :clickEffect="false"
                    clickMode="push"
                    class="lizi"
            />
        </div>
        <div id="login-container">
            <h3 class="title">
                欢迎登录校园采购信息平台
            </h3>
            <el-form ref="loginFormRef" :rules="loginFormRules" label-width="80px" :model="loginForm">
                <el-form-item prop="account">
                    <el-input v-model="loginForm.account" prefix-icon="iconfont icon-user"
                              placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima"
                              type="password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="identity" clearable placeholder="请选择身份">
                        <el-option
                                v-for="item in options"
                                :key="item.identity"
                                :label="item.label"
                                :value="item.identity">
                        </el-option>
                    </el-select>
                    <el-link type="primary" href="/forgetPassword">忘记密码？点击找回~~~</el-link>
                </el-form-item>
                <el-form-item class="button">
                    <el-button type="primary" @click="login">登录</el-button>
                    <el-button type="primary" @click="resetLoginForm" class="left">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                //登录表单的数据绑定对象
                loginForm: {
                    account: '',
                    password: ''
                },
                options: [{
                    identity: 'submitter',
                    label: '上报员'
                }, {
                    identity: 'buyer',
                    label: '采购员'
                }, {
                    identity: 'manufacturer',
                    label: '厂家'
                }, {
                    identity: 'admin',
                    label: '管理员'
                }],
                identity: '',
                //这是表单的验证规则对象
                loginFormRules: {
                    account: [{required: true, message: '请输入登录账号', trigger: 'blur'}],
                    password: [{required: true, message: '请输入登录密码', trigger: 'blur'}]
                }
            };
        },
        methods: {
            //点击重置按钮,重置登录表单
            resetLoginForm() {
                this.$refs.loginFormRef.resetFields()
            },
            login() {
                this.$refs.loginFormRef.validate(async valid => {
                    if (!valid) return;
                    var result;
                    if (this.identity == 'submitter') {
                        result = await this.$http.post('user/submitter/login', {
                            account: this.loginForm.account,
                            submitterPassword: this.loginForm.password
                        })
                    } else if (this.identity == 'buyer') {
                        result = await this.$http.post('user/buyer/login', {
                            account: this.loginForm.account,
                            buyerPassword: this.loginForm.password
                        })
                    } else if (this.identity == 'manufacturer') {
                        result = await this.$http.post('user/manufacturer/login', {
                            account: this.loginForm.account,
                            manufacturerPassword: this.loginForm.password
                        })
                    } else if (this.identity == 'admin') {
                        result = await this.$http.post('user/admin/login', {
                            account: this.loginForm.account,
                            adminPassword: this.loginForm.password
                        })
                    } else {
                        return this.$message.error("请选择身份！！！")
                    }

                    if (result.data.status != 200) {
                        this.$message.error("身份信息验证有误，请核查信息！！！")
                    } else if (this.identity !== '') {
                        this.$message.success("登录成功")
                        window.sessionStorage.setItem('token', result.data.data.token)
                        if (this.identity == 'admin') {
                            this.$router.push('/adminIndex')
                        } else if (this.identity == 'manufacturer') {
                            this.$router.push('/manufacturerIndex')
                        } else if (this.identity == 'submitter') {
                            this.$router.push('/submitterIndex')
                        } else {
                            this.$router.push('/buyerIndex')
                        }
                    }
                })
            }
        }
    };
</script>

<style scoped>
    body {
        width: 100%;
        margin: 0;
        background-color: rgb(239, 239, 239);
    }

    .lizi {
        position: fixed;
        top: 0;
        width: 100%;
    }

    #login-container {
        width: 380px;
        height: 400px;
        background: #e5e9f2;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -220px;
        margin-top: -170px;
        border-radius: 5px;
        padding-top: 40px;
        padding-right: 40px;
    }

    .title {
        margin-left: 110px;
        height: 50px;
        color: cornflowerblue;
    }

    .button {
        margin-left: 50px;
    }
</style>
